<script setup lang="ts">
import { reactive, watch, computed, ref } from 'vue'
import EchartLine from '@/components/Echart/brokenLineGraph/GraphLineChart.vue'
import { useDealerDataStore } from '@/stores/module/dealerData'
import { storeToRefs } from 'pinia'
import { DEFAULT_ECHARTS_FONTSIZE } from '@/Utils/setting'

const fontSize = DEFAULT_ECHARTS_FONTSIZE
const dealerDataStore = useDealerDataStore() // 创建store实例
const { dealerNetWork } = storeToRefs(dealerDataStore)

//遍历接口数据拿到想要的数据
const getAreaName = () => {
  const areaName = []
  dealerNetWork.value.info?.personal?.forEach((item) => {
    areaName.push(item.interval)
  })
  return areaName
}
//遍历接口数据拿到想要的数据
const getAreaId = () => {
  const areaValueId = new Set()
  dealerNetWork.value.info?.personal?.forEach((outerItem) => {
    outerItem.value.forEach((innerItem) => {
      areaValueId.add(innerItem.distributorId)
    })
  })
  return Array.from(areaValueId)
}
const idArray = getAreaId()
const getAreaValue = (idArray) => {
  const areaData = []
  dealerNetWork.value.info?.personal?.forEach((outerItem) => {
    outerItem.value.forEach((innerItem) => {
      if (idArray.includes(innerItem.distributorId)) {
        const areaId = innerItem.distributorId
        const zwall = innerItem.zwall

        const areaIndex = areaData.findIndex((item) => item.id === areaId)
        if (areaIndex === -1) {
          areaData.push({
            id: areaId,
            value: [zwall],
          })
        } else {
          areaData[areaIndex].value.push(zwall)
        }
      }
    })
  })

  return areaData.map((item) => {
    return item.value
  }) // 返回数组中的 value 数组
}

// 调整px到合适的大小
const changePixelSize = (px: number) => {
  // 获取当前屏幕宽度
  const width = document.body.clientWidth
  let res = (px / 1920) * width
  // 保留整数
  return parseInt(res.toFixed(0))
}
const y = ref(dealerNetWork.value.y)
const chartData = reactive({
  name: 'offlineLine',

  legend: {
    bottom: '0',
    itemWidth: changePixelSize(7.2),
    itemHeight: changePixelSize(10.5),
    textStyle: {
      fontSize: changePixelSize(fontSize),
      lineHeight: changePixelSize(15),
      color: '#fff',
    },
    data: getAreaId(),
  },
  grid: {
    left: '5%',
    right: '10%',
    bottom: '20%',
    top: '20%',
    containLabel: true,
  },

  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: getAreaName(),
    axisLabel: {
      color: '#fff', // 设置 X 轴标签字体颜色
      interval: 0, // 强制显示所有标签
      fontSize: changePixelSize(fontSize),
      margin: changePixelSize(5), // 调整标签与轴线的距离
    },
  },
  yAxis: {
    type: 'value',
    name: y,
    // nameLocation: 'center',
    nameTextStyle: {
      color: '#fff',
      // verticalAlign: 'bottom',
      // align: 'left',
      // padding: [changePixelSize(25), changePixelSize(20)],
      fontSize: changePixelSize(fontSize),
    },
    splitLine: {
      lineStyle: {
        color: '#123545', // 分割线颜色为灰色
        type: 'dashed', // 分割线线型为虚线
      },
    },
    axisLabel: {
      fontSize: changePixelSize(fontSize),
      color: '#08ffff',
      margin: changePixelSize(5), // 调整标签与轴线的距离
    },
  },
  dataZoom: [
    {
      type: 'inside',
      show: false,
      xAxisIndex: [0],
      zoomOnMouseWheel: false, // 禁止鼠标滚轮缩放
      moveOnMouseWheel: true, // 开启鼠标滚轮窗口平移
      moveOnMouseMove: true, // 开启鼠标移动窗口平移
      start: 0,
      end: changePixelSize(50),

      showDataShadow: false,

      textStyle: {
        color: '#ccd7d7',
      },
    },
  ],
  series: (function () {
    const series = []
    for (let i = 0; i < getAreaId().length; i++) {
      const data = getAreaValue(idArray)[i]
      series.push(...data)
      series.push({
        name: getAreaId()[i],
        type: 'line',
        data: data,
        itemStyle: {
          color: ['#833b88', '#00A0E9', '#00DE8D', '#F38D2C', '#E4007F'][i], // 设置每个系列的颜色
        },
        symbolSize: changePixelSize(7),
        symbol: 'circle',
        smooth: true,
      })
    }

    return series
  })(),
})
watch(
  () => dealerNetWork.value,
  () => {
    const idArray = getAreaId()
    chartData.legend.data = getAreaId()
    chartData.xAxis.data = getAreaName()
    chartData.yAxis.name = dealerNetWork.value.y
    chartData.series = (function () {
      const series = []
      for (let i = 0; i < getAreaId().length; i++) {
        series.push({
          name: getAreaId()[i],
          type: 'line',
          data: getAreaValue(idArray)[i],
          itemStyle: {
            color: ['#833B88', '#00A0E9', '#00DE8D', '#F38D2C', '#E4007F'][i], // 设置每个系列的颜色
          },
          symbolSize: changePixelSize(7),
          symbol: 'circle',
          smooth: true,
        })
      }

      return series
    })()
  },
  { deep: true }
)
</script>
<template>
  <card-box>
    <template v-slot:title>
      <h1>{{ dealerNetWork.info?.personal_title }}</h1>
    </template>
    <EchartLine
      :chart-data="chartData"
      v-if="dealerNetWork.info?.personal?.length"
    />
    <div class="NoPlanYet-box" v-else>
      <p>{{ $t('bi_common_nodata') }}</p>
    </div>
  </card-box>
</template>
<style lang="scss" scoped>
.NoPlanYet-box {
  width: 100%;
  text-align: center;
  padding: 120px 0;
  background-image: url('@/assets/images/canvsimage/NoPlanYet-icon.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 183px 165px;

  font-size: 16px;
  color: #00f6ff;
  p {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>
